<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2500661" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">deliver</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">pay</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">send</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">shop</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">scan</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">settings</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">refund</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">cart</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b4;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bb;</span>
                <div class="name">home_fill</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">recharge</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe722;</span>
                <div class="name">rank</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe729;</span>
                <div class="name">apps</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74a;</span>
                <div class="name">calendar</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe759;</span>
                <div class="name">post</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77d;</span>
                <div class="name">sponsor</div>
                <div class="code-name">&amp;#xe77d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78c;</span>
                <div class="name">my_fill</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b8;</span>
                <div class="name">shop_light</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c5;</span>
                <div class="name">news_hot</div>
                <div class="code-name">&amp;#xe7c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">menu</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d4;</span>
                <div class="name">home_light</div>
                <div class="code-name">&amp;#xe7d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d5;</span>
                <div class="name">my_light</div>
                <div class="code-name">&amp;#xe7d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d6;</span>
                <div class="name">cart_light</div>
                <div class="code-name">&amp;#xe7d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e7;</span>
                <div class="name">news_hot_light</div>
                <div class="code-name">&amp;#xe7e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f3;</span>
                <div class="name">location_light</div>
                <div class="code-name">&amp;#xe7f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe811;</span>
                <div class="name">subtitle_unblock_light</div>
                <div class="code-name">&amp;#xe811;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">DND_mode</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">brightness</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a0;</span>
                <div class="name">nickname</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81a;</span>
                <div class="name">mall_light</div>
                <div class="code-name">&amp;#xe81a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">address</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">cart</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ec;</span>
                <div class="name">menu</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">shopCar</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe743;</span>
                <div class="name">arrow-right</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">arrow-left</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe747;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
                <div class="name">all</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">editor</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74d;</span>
                <div class="name">editor</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75c;</span>
                <div class="name">packing-labeling</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe770;</span>
                <div class="name">credit card</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe773;</span>
                <div class="name">user center</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe774;</span>
                <div class="name">wallet</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe775;</span>
                <div class="name">land transportation</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c7;</span>
                <div class="name">物流订单</div>
                <div class="code-name">&amp;#xe7c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ce;</span>
                <div class="name">extra-inquiries</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">arrow-double-left</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">arrow-double-right</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">arrow-right</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1658200541695') format('woff'),
       url('iconfont.ttf?t=1658200541695') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-deliver"></span>
            <div class="name">
              deliver
            </div>
            <div class="code-name">.icon-deliver
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pay"></span>
            <div class="name">
              pay
            </div>
            <div class="code-name">.icon-pay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-send"></span>
            <div class="name">
              send
            </div>
            <div class="code-name">.icon-send
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shop"></span>
            <div class="name">
              shop
            </div>
            <div class="code-name">.icon-shop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-scan"></span>
            <div class="name">
              scan
            </div>
            <div class="code-name">.icon-scan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settings"></span>
            <div class="name">
              settings
            </div>
            <div class="code-name">.icon-settings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refund"></span>
            <div class="name">
              refund
            </div>
            <div class="code-name">.icon-refund
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cart"></span>
            <div class="name">
              cart
            </div>
            <div class="code-name">.icon-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home1"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.icon-home1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-homefill"></span>
            <div class="name">
              home_fill
            </div>
            <div class="code-name">.icon-homefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-recharge"></span>
            <div class="name">
              recharge
            </div>
            <div class="code-name">.icon-recharge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rank"></span>
            <div class="name">
              rank
            </div>
            <div class="code-name">.icon-rank
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-apps"></span>
            <div class="name">
              apps
            </div>
            <div class="code-name">.icon-apps
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-calendar"></span>
            <div class="name">
              calendar
            </div>
            <div class="code-name">.icon-calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-post"></span>
            <div class="name">
              post
            </div>
            <div class="code-name">.icon-post
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sponsor"></span>
            <div class="name">
              sponsor
            </div>
            <div class="code-name">.icon-sponsor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-myfill"></span>
            <div class="name">
              my_fill
            </div>
            <div class="code-name">.icon-myfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoplight"></span>
            <div class="name">
              shop_light
            </div>
            <div class="code-name">.icon-shoplight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-newshot"></span>
            <div class="name">
              news_hot
            </div>
            <div class="code-name">.icon-newshot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-menu"></span>
            <div class="name">
              menu
            </div>
            <div class="code-name">.icon-menu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home_light"></span>
            <div class="name">
              home_light
            </div>
            <div class="code-name">.icon-home_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-my_light"></span>
            <div class="name">
              my_light
            </div>
            <div class="code-name">.icon-my_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cart_light"></span>
            <div class="name">
              cart_light
            </div>
            <div class="code-name">.icon-cart_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-news_hot_light"></span>
            <div class="name">
              news_hot_light
            </div>
            <div class="code-name">.icon-news_hot_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-location_light"></span>
            <div class="name">
              location_light
            </div>
            <div class="code-name">.icon-location_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-subtitle_unblock_light"></span>
            <div class="name">
              subtitle_unblock_light
            </div>
            <div class="code-name">.icon-subtitle_unblock_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-DND_mode"></span>
            <div class="name">
              DND_mode
            </div>
            <div class="code-name">.icon-DND_mode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-down"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.icon-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-brightness"></span>
            <div class="name">
              brightness
            </div>
            <div class="code-name">.icon-brightness
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home2"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.icon-home2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close1"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nickname"></span>
            <div class="name">
              nickname
            </div>
            <div class="code-name">.icon-nickname
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mall_light"></span>
            <div class="name">
              mall_light
            </div>
            <div class="code-name">.icon-mall_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-address"></span>
            <div class="name">
              address
            </div>
            <div class="code-name">.icon-address
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cart1"></span>
            <div class="name">
              cart
            </div>
            <div class="code-name">.icon-cart1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-menu1"></span>
            <div class="name">
              menu
            </div>
            <div class="code-name">.icon-menu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopCar"></span>
            <div class="name">
              shopCar
            </div>
            <div class="code-name">.icon-shopCar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right1"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">.icon-arrow-right1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left"></span>
            <div class="name">
              arrow-left
            </div>
            <div class="code-name">.icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-all"></span>
            <div class="name">
              all
            </div>
            <div class="code-name">.icon-all
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor"></span>
            <div class="name">
              editor
            </div>
            <div class="code-name">.icon-editor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor1"></span>
            <div class="name">
              editor
            </div>
            <div class="code-name">.icon-editor1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-packing-labeling"></span>
            <div class="name">
              packing-labeling
            </div>
            <div class="code-name">.icon-packing-labeling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-creditcard"></span>
            <div class="name">
              credit card
            </div>
            <div class="code-name">.icon-creditcard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-usercenter"></span>
            <div class="name">
              user center
            </div>
            <div class="code-name">.icon-usercenter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wallet"></span>
            <div class="name">
              wallet
            </div>
            <div class="code-name">.icon-wallet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-landtransportation"></span>
            <div class="name">
              land transportation
            </div>
            <div class="code-name">.icon-landtransportation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wuliudingdan"></span>
            <div class="name">
              物流订单
            </div>
            <div class="code-name">.icon-wuliudingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-extra-inquiries"></span>
            <div class="name">
              extra-inquiries
            </div>
            <div class="code-name">.icon-extra-inquiries
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-che101"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-che101
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-double-left"></span>
            <div class="name">
              arrow-double-left
            </div>
            <div class="code-name">.icon-arrow-double-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-double-right"></span>
            <div class="name">
              arrow-double-right
            </div>
            <div class="code-name">.icon-arrow-double-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">.icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.icon-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-deliver"></use>
                </svg>
                <div class="name">deliver</div>
                <div class="code-name">#icon-deliver</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pay"></use>
                </svg>
                <div class="name">pay</div>
                <div class="code-name">#icon-pay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-send"></use>
                </svg>
                <div class="name">send</div>
                <div class="code-name">#icon-send</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shop"></use>
                </svg>
                <div class="name">shop</div>
                <div class="code-name">#icon-shop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scan"></use>
                </svg>
                <div class="name">scan</div>
                <div class="code-name">#icon-scan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings"></use>
                </svg>
                <div class="name">settings</div>
                <div class="code-name">#icon-settings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refund"></use>
                </svg>
                <div class="name">refund</div>
                <div class="code-name">#icon-refund</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cart"></use>
                </svg>
                <div class="name">cart</div>
                <div class="code-name">#icon-cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home1"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#icon-home1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-homefill"></use>
                </svg>
                <div class="name">home_fill</div>
                <div class="code-name">#icon-homefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-recharge"></use>
                </svg>
                <div class="name">recharge</div>
                <div class="code-name">#icon-recharge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rank"></use>
                </svg>
                <div class="name">rank</div>
                <div class="code-name">#icon-rank</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-apps"></use>
                </svg>
                <div class="name">apps</div>
                <div class="code-name">#icon-apps</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calendar"></use>
                </svg>
                <div class="name">calendar</div>
                <div class="code-name">#icon-calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-post"></use>
                </svg>
                <div class="name">post</div>
                <div class="code-name">#icon-post</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sponsor"></use>
                </svg>
                <div class="name">sponsor</div>
                <div class="code-name">#icon-sponsor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-myfill"></use>
                </svg>
                <div class="name">my_fill</div>
                <div class="code-name">#icon-myfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoplight"></use>
                </svg>
                <div class="name">shop_light</div>
                <div class="code-name">#icon-shoplight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-newshot"></use>
                </svg>
                <div class="name">news_hot</div>
                <div class="code-name">#icon-newshot</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu"></use>
                </svg>
                <div class="name">menu</div>
                <div class="code-name">#icon-menu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home_light"></use>
                </svg>
                <div class="name">home_light</div>
                <div class="code-name">#icon-home_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-my_light"></use>
                </svg>
                <div class="name">my_light</div>
                <div class="code-name">#icon-my_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cart_light"></use>
                </svg>
                <div class="name">cart_light</div>
                <div class="code-name">#icon-cart_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-news_hot_light"></use>
                </svg>
                <div class="name">news_hot_light</div>
                <div class="code-name">#icon-news_hot_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location_light"></use>
                </svg>
                <div class="name">location_light</div>
                <div class="code-name">#icon-location_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-subtitle_unblock_light"></use>
                </svg>
                <div class="name">subtitle_unblock_light</div>
                <div class="code-name">#icon-subtitle_unblock_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-DND_mode"></use>
                </svg>
                <div class="name">DND_mode</div>
                <div class="code-name">#icon-DND_mode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#icon-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brightness"></use>
                </svg>
                <div class="name">brightness</div>
                <div class="code-name">#icon-brightness</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home2"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#icon-home2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close1"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nickname"></use>
                </svg>
                <div class="name">nickname</div>
                <div class="code-name">#icon-nickname</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mall_light"></use>
                </svg>
                <div class="name">mall_light</div>
                <div class="code-name">#icon-mall_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-address"></use>
                </svg>
                <div class="name">address</div>
                <div class="code-name">#icon-address</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cart1"></use>
                </svg>
                <div class="name">cart</div>
                <div class="code-name">#icon-cart1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu1"></use>
                </svg>
                <div class="name">menu</div>
                <div class="code-name">#icon-menu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopCar"></use>
                </svg>
                <div class="name">shopCar</div>
                <div class="code-name">#icon-shopCar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right1"></use>
                </svg>
                <div class="name">arrow-right</div>
                <div class="code-name">#icon-arrow-right1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left"></use>
                </svg>
                <div class="name">arrow-left</div>
                <div class="code-name">#icon-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-all"></use>
                </svg>
                <div class="name">all</div>
                <div class="code-name">#icon-all</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor"></use>
                </svg>
                <div class="name">editor</div>
                <div class="code-name">#icon-editor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor1"></use>
                </svg>
                <div class="name">editor</div>
                <div class="code-name">#icon-editor1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-packing-labeling"></use>
                </svg>
                <div class="name">packing-labeling</div>
                <div class="code-name">#icon-packing-labeling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-creditcard"></use>
                </svg>
                <div class="name">credit card</div>
                <div class="code-name">#icon-creditcard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-usercenter"></use>
                </svg>
                <div class="name">user center</div>
                <div class="code-name">#icon-usercenter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wallet"></use>
                </svg>
                <div class="name">wallet</div>
                <div class="code-name">#icon-wallet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-landtransportation"></use>
                </svg>
                <div class="name">land transportation</div>
                <div class="code-name">#icon-landtransportation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wuliudingdan"></use>
                </svg>
                <div class="name">物流订单</div>
                <div class="code-name">#icon-wuliudingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-extra-inquiries"></use>
                </svg>
                <div class="name">extra-inquiries</div>
                <div class="code-name">#icon-extra-inquiries</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-che101"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-che101</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-double-left"></use>
                </svg>
                <div class="name">arrow-double-left</div>
                <div class="code-name">#icon-arrow-double-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-double-right"></use>
                </svg>
                <div class="name">arrow-double-right</div>
                <div class="code-name">#icon-arrow-double-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#icon-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right"></use>
                </svg>
                <div class="name">arrow-right</div>
                <div class="code-name">#icon-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#icon-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
